import { useState } from 'react'

function RandomList() {
  //   创建要给组件名叫AudioControls（音量控制器），上面有4组状态，“volume”音量，“bass”低音，“mid”中音和“treble”高音，存储的值在1-100之间，看起来像是这样：
  const [volume, setvolume] = useState(0)
  const [bass, setbass] = useState(0)
  const [mid, setmid] = useState(0)
  const [treble, settreble] = useState(0)
  const [obj, setobj] = useState({
    volume: 0,
    bass: 0,
    mid: 0,
    treble: 0,
  })
  let arr = ['volume', 'bass', 'mid', 'treble']

  return (
    <div>
      <h3>独立</h3>
      <div>
        <ul>
          <li>
            <button
              onClick={() => {
                if (volume <= 0) {
                  setvolume(0)
                } else {
                  setvolume((res) => res - 1)
                }
              }}
            >
              --
            </button>
            <span>{volume}</span>
            <button
              onClick={() => {
                if (volume >= 100) {
                  setvolume(100)
                } else {
                  setvolume((res) => res + 1)
                }
              }}
            >
              ++
            </button>
          </li>
          <li>
            <button
              onClick={() => {
                if (bass <= 0) {
                  setbass(0)
                } else {
                  setbass((res) => res - 1)
                }
              }}
            >
              --
            </button>
            <span>{bass}</span>
            <button
              onClick={() => {
                if (bass >= 100) {
                  setbass(100)
                } else {
                  setbass((res) => res + 1)
                }
              }}
            >
              ++
            </button>
          </li>
          <li>
            <button
              onClick={() => {
                if (mid <= 0) {
                  setmid(0)
                } else {
                  setmid((res) => res - 1)
                }
              }}
            >
              --
            </button>
            <span>{mid}</span>
            <button
              onClick={() => {
                if (mid >= 100) {
                  setmid(100)
                } else {
                  setmid((res) => res + 1)
                }
              }}
            >
              ++
            </button>
          </li>
          <li>
            <button
              onClick={() => {
                if (treble <= 0) {
                  settreble(0)
                } else {
                  settreble((res) => res - 1)
                }
              }}
            >
              --
            </button>
            <span>{treble}</span>
            <button
              onClick={() => {
                if (treble >= 100) {
                  settreble(100)
                } else {
                  settreble((res) => res + 1)
                }
              }}
            >
              ++
            </button>
          </li>
        </ul>
      </div>
      <br />
      <h3>整体</h3>
      <div>
        <ul>
          {arr.map((res, i) => {
            return (
              <li key={i}>
                <button
                  onClick={() => {
                    if (obj[res] <= 0) {
                      if (res === 'volume') setobj({ ...obj, volume: 0 })
                      if (res === 'bass') setobj({ ...obj, bass: 0 })
                      if (res === 'treble') setobj({ ...obj, treble: 0 })
                      if (res === 'mid') setobj({ ...obj, mid: 0 })
                      // console.log(obj[res], res)
                    } else {
                      if (res === 'volume')
                        setobj({ ...obj, volume: obj[res] - 1 })
                      if (res === 'bass') setobj({ ...obj, bass: obj[res] - 1 })
                      if (res === 'treble')
                        setobj({ ...obj, treble: obj[res] - 1 })
                      if (res === 'mid') setobj({ ...obj, mid: obj[res] - 1 })
                    }
                  }}
                >
                  --
                </button>
                {res}:{obj[res]}
                <button
                  onClick={() => {
                    if (obj[res] >= 100) {
                      if (res === 'volume') setobj({ ...obj, volume: 100 })
                      if (res === 'bass') setobj({ ...obj, bass: 100 })
                      if (res === 'treble') setobj({ ...obj, treble: 100 })
                      if (res === 'mid') setobj({ ...obj, mid: 100 })
                      // console.log(obj[res], res)
                    } else {
                      if (res === 'volume')
                        setobj({ ...obj, volume: obj[res] + 1 })
                      if (res === 'bass') setobj({ ...obj, bass: obj[res] + 1 })
                      if (res === 'treble')
                        setobj({ ...obj, treble: obj[res] + 1 })
                      if (res === 'mid') setobj({ ...obj, mid: obj[res] + 1 })
                    }
                  }}
                >
                  ++
                </button>
              </li>
            )
          })}
        </ul>
      </div>
    </div>
  )
}
export default RandomList
